<template>
    <div
        class="chart-wrapper"
        :style="{
            width: '100%',
            height: height + 'px',
        }"
    >
        <div
            class="slot"
            v-if="title"
            :style="{ marginRight: 20 * ratio + 'px' }"
        >
            <div class="plate-header caution">
                <span class="title">{{ title }}</span>
            </div>
        </div>
        <div class="slot">
            <div
                class="chart"
                :id="id"
                :style="{ width: '100%', height: height + 'px' }"
            ></div>
        </div>
    </div>
</template>

<script>
    import echarts from "echarts";
    import { COLOR_PLATE } from "@/config/global";
    import { calculateColorBrightness } from "@/lib/extension";

    export default {
        name: "",
        data() {
            return {
                option: null,
                chartObj: null,
                useDualTheme: true,
                theme: "night",
                ratio: JSON.parse(localStorage.ratio),
            };
        },
        props: {
            id: {
                type: String,
                default: "",
            },
            title: {
                type: String,
            },
            unit: {
                type: String,
            },
            height: {
                type: Number,
                default: 300,
            },
            chartData: {
                type: Array,
                required: true,
            },
            yAxisName: {
                type: String,
                default: "",
            },
            chartColors: {
                type: Array,
                default: () => new Array("#fcd873"),
            },
        },
        watch: {
            chartData: {
                handler(n) {
                    this.updateChart();
                },
                deep: true,
                immediate: true,
            },
            id: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            height: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            chartData: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            yAxisName: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
            chartColors: {
                handler(n) {
                    this.updateChart();
                },
                immediate: true,
            },
        },
        methods: {
            updateChart() {
                this.determineTheme();
                this.$nextTick(() => {
                    if (this.chartObj) {
                        this.chartObj.setOption(this.option);
                    } else {
                        this.renderChart();
                    }
                });
            },
            renderChart() {
                if (this.chartData[0]) {
                    this.option = {
                        grid: {
                            top: 50 * this.ratio,
                            left: 0,
                            right: 0 * this.ratio,
                            bottom: 5,
                            containLabel: true,
                        },
                        tooltip: {
                            show: true,
                            trigger: "axis",
                        },
                        xAxis: {
                            type: "category",
                            data: this.chartData.map((o) => o.name),
                            axisLine: { show: false },
                            axisTick: { show: false },
                            axisLabel: {
                                fontSize: 12 * this.ratio,
                                color: this.theme === "day" ? "#333" : "#fff",
                            },
                        },
                        legend: {
                            show:true,
                            top: 5 * this.ratio,
                            right: 5 * this.ratio,
                            textStyle: {
                                color: "#fff",
                                fontSize: 12 * this.ratio,
                                fontFamily: "ali-m",
                            },
                            itemWidth: 0,
                            itemHeight: 0,
                            orient: "horizontal",
                        },
                        yAxis: [
                            {
                                name: this.yAxisName,
                                type: "value",
                                axisLine: { show: false },
                                axisTick: {
                                    show: true,
                                    lineStyle: {
                                        color:
                                            this.theme === "day" ? "#333" : "#fff",
                                    },
                                },
                                axisLabel: {
                                    fontSize: 12 * this.ratio,
                                    color: this.theme === "day" ? "#333" : "#fff",
                                },
                                splitLine: { show: false },
                            },
                        ],
                        series: [
                            {
                                type: "line",
                                name: this.unit,
                                data: this.chartData,
                                showAllSymbol: true,
                                symbolSize: 20,
                                smooth:"false",
                                boundaryGap: false,
                                lineStyle: {
                                    width: 2 * this.ratio,
                                    color: this.chartColors[0],
                                },
                                itemStyle: {
                                    color: "#00000000",
                                    borderWidth: 0,
                                },
                                areaStyle: {
                                    opacity: 0.15,
                                    color: this.chartColors[0],
                                },
                                label: {
                                    show: true,
                                },
                            },
                        ],
                    };
                    let chartWrapper = document.getElementById(this.id);
                    this.chartObj = echarts.init(chartWrapper);
                    this.chartObj.setOption(this.option);
                    this.chartObj.resize();
                    window.onresize = () => {
                        this.chartObj.resize();
                    };
                }
            },
            determineTheme() {},
        },
    };
</script>

<style lang="less" scoped>
    .chart {
        width: 100%;
    }
</style>